<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <div th:fragment="footer">
        <script th:src="@{/static/lib/jq/jquery-2.1.4.min.js}"></script>
        <script th:src="@{/static/lib/jq-ui/jquery-ui.min.js}"></script>
        <script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
        <script th:src="@{/static/lib/ckeditor5/ckeditor.js}"></script>
        <script th:src="@{/static/js/public.js}"></script>
        <script th:src="@{/static/lib/jquery-ztree/3.5/js/jquery.ztree.all-3.5.js}"></script>
        <script th:inline="javascript">
            let ctx = [[${#request.getContextPath()}]];
            /**
             * 获取树结构ID组
             * @param treeNode 树结构
             * @returns ids数组
             */
            function getzTreeChildrenNodeIds(treeNode) {
                //定义变量接收节点
                let strID = "";
                //接收返回的节点
                strID = getzTreeChildrenNode(treeNode, strID);
                //节点拼接
                strID = strID + "," + treeNode.id;
                //去除拼接节点的第一个“,”号
                return strID.substring(1, strID.length);
            }
            //递归查询当前节点下面的全部子节点（一）
            function getzTreeChildrenNode(treeNode, result) {
                //检测是否为父节点
                if (treeNode.isParent) {
                    //查询子节点
                    let childrenNodes = treeNode.children;
                    if (childrenNodes) {
                        //子节点拼接
                        for (let i = 0 ; i < childrenNodes.length ; i++) {
                            result += ',' + childrenNodes[i].id;
                            //循环调用
                            result = getzTreeChildrenNode(childrenNodes[i], result);
                        }
                    }
                }
                return result;//返回
            }
            //超出部分用鼠标悬停时，tooltip显示完整内容
            $(document).on('mouseenter', "tbody td", function () {
                try
                {
                    var range = document.createRange();
                    var cellChild = event.target.querySelector('.layui-table-cell');
                    $("tbody td .layui-table-cell").css("overflow", "visible");
                    try
                    {
                        //css底层方法，截取文字的长度
                        range.setStart(cellChild, 0);
                        range.setEnd(cellChild, 1);
                    }
                    catch(e)
                    {
                    }
                    //文字的显示长度
                    var rangeWidth = range.getBoundingClientRect().width;
                    //这里加了30是应为layui的数据表格默认padding是15px,左右一共是30
                    //offsetWidth是元素的宽度,这里指一个表格容器的宽度
                    if (rangeWidth + 30 > this.offsetWidth)
                    {
                        $("tbody td .layui-table-cell").css("overflow", "hidden");
                        $(this).attr('data-toggle', 'tooltip').attr('title', $(this).text());
                    }
                    $("tbody td .layui-table-cell").css("overflow", "hidden");
                }
                catch(e)
                {
                    //适配IE9/IE10，IE9/IE10会直接进这里
                    $("tbody td .layui-table-cell").css("overflow", "visible");
                    //scrollWidth指内容物的宽度，这里虽然指文字宽度，但没有上面截取的精确
                    if (this.offsetWidth < this.scrollWidth)
                    {
                        $("tbody td .layui-table-cell").css("overflow", "hidden");
                        $(this).attr('title', $(this).text());
                    }
                    $("tbody td .layui-table-cell").css("overflow", "hidden");
                }
            });
            //鼠标离开时，tooltip消失
            $(document).on('mouseleave', 'tbody td', function () {
                $(this).attr('data-toggle', '');
            });
        </script>
    </div>
</html>